<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box" style="margin-bottom: 20px">
        <div class="tips-area">
          <p class="f-16" style="margin-bottom: 16px">
            注：顾问注册费用：<span class="f-w-600">680元/件</span>
          </p>
          <p v-for="(item, index) in tips" :key="index">{{ item }}</p>
        </div>
        <div class="flx-row-s-s m-b-30">
          <span class="title nes">商标名称</span>
          <Input
            v-model="name"
            type="textarea"
            style="width: 400px"
            :rows="4"
            placeholder="若您有多个商标需求，可一并填写，无需拆分提交多个需求"
          />
        </div>
        <div class="flx-row-s-s m-b-30">
          <span class="title">说明</span>
          <Input
            v-model="remark"
            type="textarea"
            style="width: 400px"
            :rows="4"
          />
        </div>
        <div class="flx-row-s-s m-b-30">
          <span class="title nes">手机号</span>
          <Input
            v-model.trim="phone"
            maxlength="11"
            style="width: 400px"
            type="text"
            size="large"
          />
        </div>
        <div class="flx-row-s-s">
          <span class="title nes">验证码</span>
          <Input
            v-model="photoCode"
            maxlength="4"
            style="width: 280px; margin-right: 20px"
            size="large"
          />
          <div class="code-area" @click="refreshCode">
            <Identify
              :identifyCode="identifyCode"
              :contentWidth="100"
              :contentHeight="40"
              :fontSizeMax="25"
            />
          </div>
        </div>
        <Checkbox v-model="agree" class="c-g" style="margin: 23px 0 35px 145px"
          >同意让腾讯云授权的商标服务商通过该电话联络并提供服务。</Checkbox
        >
        <div class="bottom-area">
          <div
            class="big-button-size-40 user-strong-button"
            style="width: 120px"
          >
            提交需求
          </div>
        </div>
      </div>
      <div class="box">
        <h2 class="f-20 c-d2 f-w-600 m-b-30" style="text-align: center">
          顾问注册服务流程
        </h2>
        <div class="r-l"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { makeCode } from "@/utils/format";
export default {
  components: {
    Identify: () => import("_c/identify"),
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      breadCrumb: [
        { name: "商标服务", to: "/rmregister" },
        { name: "商标注册", to: "/rmregisterf" },
      ],
      tips: [
        "1、上述费用为同类别商品服务十项以内的价格，若超出十项每项加收30元。1个类别中为1件顾问注册申请，多个类别视为多件。",
        "2、提交需求后，预计顾问将在2小时内与您电话联系并提供服务(非工作时间内会顺延至下一个工作日与您联系)。",
        "3、190平台会保护您的商标及个人信息，仅服务顾问能看到您的商标及联系方式，请您放心提供。",
        "4、商标申请能否成功是由商标局决定，腾讯云、服务商、专业顾问都不能确保和承诺注册结果。",
        "5、被派单的顾问将会为您提供专业商标查询、近似评估、类别规划、材料准备与整理等全流程代办商标服务。",
        "特别提示。商标注册申请能否成功是由商标局审查后做出的决定，腾讯云、服务商及顾可不能确保和承诺结果。若有代理机构向您做出注册肯定成功等承诺，还请您仔细分辨或向律师、工商机关确认。",
      ],

      name: "",
      remark: "",
      phone: "",
      photoCode: "",
      agree: false,
      identifyCode: null,
    };
  },
  mounted() {
    this.identifyCode = makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 刷新验证码
    refreshCode() {
      this.identifyCode = makeCode(this.identifyCodes, 4);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    background-color: #fff;
    padding: 20px 30px;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;

    .tips-area {
      padding: 22px;
      border: $mainColor solid 1px;
      background-color: $color-main;
      font-size: 14px;
      color: $mainColor;
      margin-bottom: 35px;

      p {
        line-height: 24px;
      }
    }

    .title {
      font-size: #333333;
      font-size: 14px;
      width: 140px;
      line-height: 40px;

      &.nes::after {
        content: "*";
        color: #f9521f;
        font-weight: 600;
      }
    }
    .bottom-area {
      padding: 20px 0 55px;
      border-top: 1px solid #eaeaea;
    }
  }
}
.r-l {
  width: 1140px;
  height: 55px;
  @include bg-setting("r-l", cover, center);
}
.m-b-30 {
  margin-bottom: 30px;
}
</style>